<!-- AI绘图风格 -->
<script setup>
// 提示框
import { reactive, ref, onMounted,nextTick } from "vue";

import request from "@/common/utils/request";


import { PlusOutlined, CheckOutlined} from "@ant-design/icons-vue";
import { computed } from "vue";

const emit = defineEmits(["comfirm"]);

const props = defineProps({
    // ai模型列表
    aiModelList: {
        type: Array,
        default: () => []
    }
})

const state = reactive({
    // 控制气泡的开关
    visible: false,
    // 当前选择的绘图风格
    currentId: "",
})

// 当前选择的项, 默认选择第一个
const currentId = computed({
    get() {
        return state.currentId ? state.currentId : props.aiModelList?.[0]?.id || ''
    },
    set(val) {
        state.currentId = val
    }
})

// 点击确定
const submitFn = () => {
    console.log("点击确定");
    emit("comfirm");
    state.visible = false
}

const oldCurrentId = ref('')

const openPop = () => {
    state.visible = true;
    nextTick(() => {
        oldCurrentId.value = state.currentId
    })
};

const closePop = () => {
    currentId.value = oldCurrentId.value
    state.visible = false
};

// 视频组 获取ai视频发送请求 需要的参数
const requestData = computed(() => {
    let feature_id = props.aiModelList.find(ele => ele.id == currentId.value)?.feature_id
    return {
        modelId: currentId.value,
        feature_id,
    }
})

// 修改当前选择的绘图风格
const changeCurrentId = (id) => {
    currentId.value = id
}

defineExpose({
    openPop,
    closePop,
    changeCurrentId,
    requestData
});

</script>

<template>
    <div>
        <a-popover v-model:visible="state.visible" title="绘图风格" trigger="click">
            <template #content>
                <div class="content_box">
                    <div class="style_item" :class="{
                            'active_select' : currentId == i.id
                        }" 
                        v-for="i in props.aiModelList" :key="i.id" @click="currentId = i.id">
                        <div class="isSelect"  v-show="currentId == i.id"><CheckOutlined :style="{
                            'font-weight': 900
                        }"/></div>
                        <img :src="i.example_img" alt="">
                        <span class="desc">{{ i.name }}</span>
                    </div>
                </div>
                <div class="bottom_btns">
                    <a-button  @click="closePop">取消</a-button>
                    <a-button type="primary" @click="submitFn">应用</a-button>
                </div>
            </template>
            <slot name="trigger">
            </slot>
        </a-popover>
    </div>
</template>


<style lang="less" scoped>
        .content_box{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
        .style_item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            position: relative;
            &:hover{
               & img{
                border-color: var(--ss-primary-6);
               } 
            }
            &.active_select{
                img{
                border-color: var(--ss-primary-6);
               } 
            }
            .desc{
                font-size: 12px;
                color: rgb(54, 54, 54);
            }
            img{
                height: 88px;
                width: 100%;
                border-radius: 6px;
                overflow: hidden;
                object-fit: cover;
                border: 1px solid transparent;
            }
            .isSelect{
                position: absolute;
                top: 5px;
                right: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 19px;
                height: 19px;
                color: #fff;
                font-weight: 900;
                background-color: var(--ss-primary-6);
            }


        }
    }
    .bottom_btns{
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
</style>